<template>
    <div class="madp-statistics-card">
        <div
            v-for="item in cardPrams"
            :key="item.key"
            class="madp-statistics-card-item"
            :style="{ backgroundColor: item.color || 'transparent' }"
        >
            <span class="madp-statistics-card-item-desc">{{ item.label }}</span>
            <span class="madp-statistics-card-item-number">
                {{
                cardData[item.key] || 0
                }}
            </span>
        </div>
    </div>
</template>

<script>
export default {
    props: ["cardInfo", "cardData"],
    data() {
        return {
            cardPrams: []
        };
    },
    mounted() {
        this.cardPrams = this.cardInfo;
    }
};
</script>

<style lang="scss" scoped>
.madp-statistics-card {
    margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-right: 20px;
    &-item {
        width: 12%;
        height: 118px;
        border-radius: 8px;
        padding: 0 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: fit-content;
        padding: 0 12px;
        &-desc {
            font-size: 18px;
        }
        &-number {
            font-size: 24px;
            font-weight: bold;
        }
    }
}
</style>